<template>
	<view class="swiper-box">
		<swiper class="swiper" indicator-color="#CECECE" indicator-active-color="#CECECE"  :indicator-dots="false"
			:autoplay="true" :interval="4000" :duration="500" :style="[style]" circular>
			<swiper-item v-for="(item, idx) in bnannerList" :key="idx">
				<view class="swiper-item" :style="[style]" @click="item.redirectionUrl?JumpUrl(item.redirectionUrl,2):false">
					<image class="banner-img" :style="[style]" lazy-load="" :src="item" :mode="mode" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "m-swiper",
		data() {
			return {

			};
		},
		props: {
			mode: {
				type: String,
				default: 'aspectFill',
				/**
				 * 缩放
				 * scaleToFill   --- 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
				 * aspectFit   --- 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
				 * aspectFill   --- 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
				 * widthFix   --- 宽度不变，高度自动变化，保持原图宽高比不变
				 * heightFix   --- 高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3。
				 * 裁剪
				 * bottom，center，left，right，top left，top right，bottom left，bottom right
				 */
			},
			bnannerList: {
				type: Array,
				default: () => {
					return []
				},
			},
			height: {
				type: String,
				default: '300rpx'
			},
			radius: {
				default: '16',
				type: String,
			},
		},
		mounted() {
			console.log(this.bnannerList)
		},
		computed: {
			style() {
				const radius = this.radius.split(" ").filter(x => x);
				return {
					borderRadius: radius.map(n => `${n}rpx`).join(' '),
					height: this.height,
				}
			},
		},
	}
</script>

<style lang='scss' scoped>
	.swiper {
		overflow: hidden;
		margin-bottom: 20rpx;
		.swiper-item {

			.banner-img {
				width: 100%;
				height: 100%;

				//border-radius: 16rpx;
				/deep/ div {
					background-position: inherit !important;
				}
			}
		}

		/deep/ {
			.uni-swiper-dot {
				width: 10rpx;
				height: 10rpx;
				background: #f6f6f6 !important;
				border-radius: 5rpx;

				&.uni-swiper-dot-active {
					width: 20rpx;
				}
			}
		}
	}
</style>
